<template>
  <client-only>
    <div class="table-pagination">
      <div class="table-pagination-total">共 {{ count }} 项数据</div>
      <div style="display: flex">
        <el-select
          v-model="pageSize"
          style="width: 100px"
          @change="handleSizeChange"
        >
          <el-option
            v-for="size in sizeOptions"
            :key="size.value"
            :label="size.label"
            :value="size.value"
          />
        </el-select>
        <el-pagination
          background
          style="margin-left: 24px"
          :page-size="selectPageSize"
          :total="count"
          :pager-count="7"
          layout="prev, pager, next"
          :current-page="currentPage"
          @current-change="onCurrentChange"
        >
        </el-pagination>
        <!-- <el-pagination
      background
      layout="prev, pager, next,sizes,jumper"
      :total="props.count"
      :page-sizes="[10,20,50,100]"
      :pager-count="11"
      :page-size="props.pageSize"
      :current-page="props.pageNo"
      @size-change="handleSizeChange"
      @prev-click="onPrevClick"
      @next-click="onNextClick"
      @current-change="onCurrentChange"
    /> -->
      </div>
    </div>
  </client-only>
</template>

<script setup lang="ts">
const props = defineProps({
  pageSize: {
    type: Number,
    default: 1,
  },
  count: {
    type: Number,
    default: 0,
  },
  pageNo: {
    type: Number,
    default: 1,
  },
});
const pageSize = ref(props.pageSize);
const sizeOptions = [
  { value: 10, label: '10 条/页' },
  { value: 20, label: '20 条/页' },
  { value: 50, label: '50 条/页' },
  { value: 100, label: '100 条/页' },
];

const currentPage = ref(props.pageNo);
const selectPageSize = ref(props.pageSize);
const emits = defineEmits(['onPagechange', 'onSizechange']);

const onCurrentChange = (e: any) => {
  currentPage.value = e;
  emits('onPagechange', e);
};
const handleSizeChange = (e: any) => {
  selectPageSize.value = e;
  emits('onSizechange', e);
};
// 计算总的页数
const totalPages = computed(() => Math.ceil(props.count / props.pageSize));
// 计算最后一页的数据量
const lastPageDataCount = computed(() => props.count % props.pageSize);
// 判断是否是最后一页只有一条数据
const isLastPageWithOneData = computed(
  () => totalPages.value > 1 && lastPageDataCount.value === 1
);

provide('isLastPageWithOneData', isLastPageWithOneData.value);

// const isLastPageWithOneData = () => {
//   // 计算总的页数
//   const { pageSize, count } = defineProps<{
//     pageSize: number;
//     count: number;
//   }>();
//   const totalPages = Math.ceil(count / pageSize);

//   // 计算最后一页的数据量
//   const lastPageDataCount = count % pageSize;

//   // 判断是否是最后一页只有一条数据
//   const isLastPageWithOneData = totalPages > 1 && lastPageDataCount;
//   return isLastPageWithOneData;
// };
</script>

<style scoped lang="scss">
.table-pagination {
  display: flex;
  align-items: center;
  // width: 96%;
  // position: absolute;
  // bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .table-pagination-total {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.custom-sizes {
  display: flex;
  align-items: center;
  margin-left: 16px;
}
.drugStorage-page-pagination {
  margin-top: 24px;
  display: flex;
  align-items: center;
  .drugStorage-page-pagination-total {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
</style>
